<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <button @click="handleClick">按钮{{ title }}</button>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  data() {
    return {
      title: 'Hello Vue!',
    }
  },
  components: {
    HelloWorld,
  },
  methods: {
    handleClick() {
      this.title = 'Hello 上海，加油！'
    },
  },
  // 初始化-数据
  beforeCreate() {
    console.log('beforeCreate:', this.$el)
  },
  created() {
    console.log('created:', this.$el)
  },
  // 挂载-dom
  beforeMount() {
    console.log('beforeMount:', this.$el)
  },
  mounted() {
    console.log('mounted:', this.$el)
  },
  // 更新- 数据 - dom (不要在更新的阶段的生命周期中更新数据)
  beforeUpdate() {
    console.log('beforeUpdate:', this.$el)
  },
  updated() {
    // 监听到数据的改变
    // console.log(this.title, '-改变的数据')
    // if (this.title.length) {
    //   this.title += '10'
    // }
    console.log('updated:', this.$el)
  },
  // 销毁-组件卸载
  beforeDestroy() {
    console.log('beforeDestroy:', this.$el)
  },
  destroyed() {
    console.log('destroyed:', this.$el)
  },
}
</script>
